<template>
  <div ref="xmChart" class="chart"></div>
</template>
<script>
const echarts = require("echarts");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legend");
require("echarts/lib/component/title");
require("echarts/lib/component/markLine");
require("echarts/lib/component/markArea");
require("echarts/lib/component/axisPointer");
import china from "echarts/map/json/china.json";
echarts.registerMap("china", china);
export default {
  name: "ChartBox",
  props: {
    options: {},
  },
  watch: {
    options: {
      handler() {
        this.updateChartView();
      },
      deep: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    window.addEventListener("resize", this.handleWindowResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleWindowResize);
  },
  methods: {
    /**
     * 更新echart视图
     */
    updateChartView() {
      this.$nextTick(() => {
        this.chart = echarts.init(this.$refs.xmChart);
        this.chart.resize();
        this.chart.setOption(this.options, true);
      });
    },
    /**
     * 当窗口缩放时，echart动态调整自身大小
     */
    handleWindowResize() {
      if (!this.chart) return;
      this.chart.resize();
    },
  },
};
</script>

